<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-bar-left flex-c-c" @click="show = true">
				<u-icon name="list" size="28px"></u-icon>
			</view>
			<view class="nav-bar-center line-1">
				<text>--播客--</text>
			</view>
			<view class="nav-bar-right flex-c-c">
				<u-icon name="plus-circle-fill" size="28px"></u-icon>
			</view>
		</view>
		<!-- 搜索栏 -->
		<view class="search">
			<u-search placeholder="亲历者说" :showAction="false" inputAlign="center" bgColor="#e5e5e5"></u-search>
		</view>

		<!-- 圈子关注的人 -->
		<view class="avatar">
			<view class="avatar-left">
				<image src="@/static/icon/circle.png" mode=""></image>
				<u--text text="我的播客" size="15rpx" margin="15rpx"></u--text>
			</view>
			<view class="avatar-right">
				<view class="avatar-right-user" v-for="(item,index) in fill" :key="item.userId" @tap="goCategory">
					<u-avatar :src="item.src" size="100rpx" mode="widthFix">
					</u-avatar>
					<u--text :text="item.name" size="15rpx" margin="15rpx 0rpx" lines="1"></u--text>
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="banner">
			<u-swiper :list="list3" keyName="image" previousMargin="13" nextMargin="13" indicator indicatorMode="dot"
				circular radius="5" bgColor="#f6f6f6"></u-swiper>
		</view>

		<!-- 个性推荐 -->
		<view class="recommend">
			<view class="title">
				<text>猜你喜欢</text>
				<view class="">
					<u-button size="mini" text="兴趣定制" shape="circle"></u-button>
				</view>
			</view>
			<view class="container">
				<view class="container-item" v-for="(item,index) in recommend" :key="index">
					<image :src="item.picUrl" mode=""></image>
					<u--text :text="item.rcmdText" lines="2" size="13rpx" align="center">
					</u--text>
				</view>
			</view>
		</view>

		<!-- 创作翻唱 -->
		<view class="cover">
			<view class="more">
				<text>创作翻唱</text>
				<view>
					<u-button size="mini" text="更多>" shape="circle"></u-button>
				</view>
			</view>
			<view class="cover-container">
				<view class="cover-container-item" v-for="(item,index) in dj" :key="index" @tap="send(item.id)">
					<image :src="item.picUrl" mode=""></image>
					<view class="cate">
						<u--text :text="item.desc" lines="2" size="13rpx">
						</u--text>
					</view>
				</view>
			</view>
		</view>

		<!-- 故事 -->
		<view class="emotion">
			<view class="emo-menu">
				<text>故事</text>
				<view>
					<u-button size="mini" text="更多>" shape="circle"></u-button>
				</view>
			</view>
			<view class="emo-container">
				<swiper class="swiper" :duration="500" next-margin="25rpx">
					<swiper-item v-for="(item,index) in result" :key="index">
						<view class="swiper-item uni-bg-one" v-for="(child,indez) in item" :key="indez" @tap="plays(child.id,index,indez)">
							<image :src="child.picUrl" mode=""></image>
							<view class="swiper-item-title">
								<u--text :text="child.name" size="35rpx"></u--text>
								<text class="swiper-item-title-type">{{child.program.radio.category}}</text>
								<text>{{child.copywriter}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>

			</view>
		</view>

	</view>
</template>

<script>
	import Banner from '@/components/Banner.vue'

	import {
		_getBanner,
		_getRecommendDj,
		_getrecommendType,
		_getTodayPerfered
	} from '@/http/podcast.js'
	export default {
		components: {
			Banner
		},
		data() {
			return {
				banners: [],
				list3: [
					'https://via.placeholder.com/360x360.png/d7d7d6',
					'https://via.placeholder.com/360x360.png/d7d7d6',
					'https://via.placeholder.com/360x360.png/d7d7d6',
				],
				fill: [{
						name: '全部分类',
						src: 'https://via.placeholder.com/80x80.png/d7d7d6',
					},
					{
						name: '排行榜',
						src: 'https://via.placeholder.com/80x80.png/d7d7d6',
					},
					{
						name: '助眠解压',
						src: 'https://via.placeholder.com/80x80.png/d7d7d6',
					},
					{
						name: '有声书',
						src: 'https://via.placeholder.com/80x80.png/d7d7d6',
					},
					{
						name: '广播电台',
						src: 'https://via.placeholder.com/80x80.png/d7d7d6',
					}
				],
				recommend: [], //推荐
				limit: 3,
				dj: [],
				result: [],

			};
		},
		methods: {
			//播客详情
			send(id) {
				uni.navigateTo({
					url: '/view/RadioList/RadioList?id=' + id
				})
			},
			goCategory(){
				uni.navigateTo({
					url: '/view/PodcastCategory/PodcastCategory'
				})
			},
			
			plays(id,index,indez){
				const ar = 3 * index + indez
				console.log(ar);
				console.log(id);
				// this.$store.dispatch("playIndex", ar);
				// this.$store.dispatch("playMusic", {
				// 	list: this.result,
				// 	index: ar,
				// 	listid: id
				// })
			},

			async Banner() {
				const {
					data = []
				} = await _getBanner()
				this.banners = data
			},
			async RecommendDj() {
				const {
					data = []
				} = await _getRecommendDj()
				this.recommend = data
			},
			async CoverInCreate() {
				const {
					djRadios = []
				} = await _getrecommendType()
				this.dj = djRadios.slice(0, 3)
			},
			async TodayPerfered() {
				const {
					result = []
				} = await _getTodayPerfered()
				for (let i = 0; i < result.length; i + 3) {
					this.result.push(result.splice(i, i + 3))
				}

			}
		},
		onLoad() {
			this.Banner()
			this.RecommendDj()
			this.CoverInCreate()
			this.TodayPerfered()
		},
		computed: {

		},
		filters: {},

	}
</script>

<style lang="scss" scoped>
	* {
		font-family: STXihei;
	}

	.page {
		background-color: #f6f6f6;
	}

	// 导搜索栏
	.nav-bar {
		width: 100vw;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-center {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 30rpx;
		}

		&-left,
		&-right {
			width: 100rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			&-icon {
				width: 40%;
				height: 40%;
				margin: 15px 15px;

			}
		}
	}

	.search {
		margin: 0 30rpx;
	}


	.avatar {
		margin: 30rpx 30rpx;
		margin-right: 0;
		display: flex;

		&-left {
			width: 100rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-image: linear-gradient(#619cc1, #DA70D6, #ffb0fe);
			}
		}

		&-right {
			margin-left: 35rpx;
			padding-left: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			overflow-x: scroll;

			&-user {
				margin-right: 35rpx;
			}
		}
	}

	.recommend {
		padding: 30rpx;

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
		}

		.container {
			display: flex;
			flex-wrap: wrap;
			// align-items: center;

			&-item {
				width: 30%;
				margin: 18rpx 0rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 5rpx 8rpx;

				image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 20rpx;
					display: flex;
					// justify-content: space-between;
					box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, .1);

				}

			}
		}
	}

	.cover {
		padding: 0 30rpx;

		.more {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
		}

		.cover-container {
			display: flex;
			flex-wrap: wrap;
			// align-items: center;

			&-item {
				width: 30%;
				margin: 18rpx 0rpx;
				display: flex;
				flex-direction: column;
				// justify-content: center;
				// align-items: center;
				padding: 5rpx 8rpx;

				image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 20rpx;
					box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, .1);

				}

				.cate {
					display: flex;
					// align-items: center;

					&-text {
						font-size: 8rpx;
						height: 30rpx;
						margin-top: 8rpx;
						border: 1px solid #ccc;
						border-radius: 8rpx;
						color: #ccc;
					}
				}

			}
		}
	}


	// 情感
	.emotion {
		padding:0 30rpx;

		.emo-menu {
			display: flex;
			justify-content: space-between;
		}

		.swiper {
			height: 550rpx;
		}

		.swiper-item {
			display: flex;
			margin-top: 35rpx;
			// border: 1px solid red;

			&-title {
				flex: 1;
				color: #999;
				font-size: 15rpx;
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;

				&-type {
					width: 100rpx;
					border: 1px solid #999;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12rpx;
					margin-left: -8rpx;
					-webkit-transform: scale(0.8);
				}

			}

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 15rpx;
			}
		}



	}
</style>
